<template>
  <div class="admin-contacts">
    <div class="page-header">
      <h2>联系人设置</h2>
    </div>

    <el-tabs v-model="activeTab" type="card">
      <!-- 联系人管理 -->
      <el-tab-pane label="联系人管理" name="contacts">
        <div class="tab-content">
          <div class="header-actions">
            <el-button type="primary" @click="openAdd"><el-icon><Plus /></el-icon>新增</el-button>
          </div>

          <el-card>
      <div class="toolbar">
        <el-input v-model="keyword" placeholder="搜索姓名/电话/说明" style="width: 240px" clearable />
        <el-select v-model="type" placeholder="类型" clearable style="width: 160px">
          <el-option label="参展联系" value="exhibitor" />
          <el-option label="观展联系" value="visitor" />
          <el-option label="活动联系" value="activity" />
          <el-option label="赞助联系" value="sponsor" />
          <el-option label="媒体联系" value="media" />
        </el-select>
        <el-select v-model="status" placeholder="状态" clearable style="width: 140px">
          <el-option label="启用" value="active" />
          <el-option label="禁用" value="inactive" />
        </el-select>
        <el-button @click="loadList" :loading="loading">查询</el-button>
      </div>

      <el-table :data="list" v-loading="loading" stripe>
        <el-table-column prop="type" label="类型" width="140">
          <template #default="scope">{{ typeText(scope.row.type) }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="phone" label="电话" width="160" />
        <el-table-column prop="description" label="说明" min-width="200" show-overflow-tooltip />
        <el-table-column prop="sortOrder" label="排序" width="100" />
        <el-table-column prop="status" label="状态" width="110">
          <template #default="scope">
            <el-tag :type="scope.row.status==='active'?'success':'info'">{{ scope.row.status==='active'?'启用':'禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="openEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pager">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="size"
          :total="total"
          :current-page="current"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="form.id?'编辑联系人':'新增联系人'" width="520px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="类型" required>
          <el-select v-model="form.type" placeholder="选择类型" style="width:100%">
            <el-option label="参展联系" value="exhibitor" />
            <el-option label="观展联系" value="visitor" />
            <el-option label="活动联系" value="activity" />
            <el-option label="赞助联系" value="sponsor" />
            <el-option label="媒体联系" value="media" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" required><el-input v-model="form.name" /></el-form-item>
        <el-form-item label="电话" required><el-input v-model="form.phone" /></el-form-item>
        <el-form-item label="说明"><el-input v-model="form.description" type="textarea" :rows="2" /></el-form-item>
        <el-form-item label="排序"><el-input-number v-model="form.sortOrder" :min="0" :max="999" /></el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
      </template>
    </el-dialog>
        </div>
      </el-tab-pane>

      <!-- 联系我们轮播图设置 -->
      <el-tab-pane label="联系我们轮播图设置" name="carousel">
        <div class="tab-content">
          <CarouselManager 
            title="联系我们轮播图管理" 
            module-type="contacts"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import CarouselManager from '@/components/admin/CarouselManager.vue'
import request from '@/utils/request'

export default {
  name: 'AdminContacts',
  components: { 
    Plus,
    CarouselManager
  },
  setup() {
    const loading = ref(false)
    const saving = ref(false)
    const list = ref([])
    const total = ref(0)
    const activeTab = ref('contacts')
    const current = ref(1)
    const size = ref(20)
    const keyword = ref('')
    const type = ref('')
    const status = ref('')

    const dialogVisible = ref(false)
    const form = reactive({ id: null, type: '', name: '', phone: '', description: '', sortOrder: 0, status: 'active' })

    const typeText = (v) => ({ exhibitor: '参展联系', visitor: '观展联系', activity: '活动联系', sponsor: '赞助联系', media: '媒体联系' }[v] || v)

    const loadList = async () => {
      loading.value = true
      try {
        const params = { current: current.value, size: size.value }
        if (keyword.value) params.keyword = keyword.value
        if (type.value) params.type = type.value
        if (status.value) params.status = status.value
        const res = await request.get('/admin/contacts/page', { params })
        if (res && (res.code === '200' || res.code === 200)) {
          list.value = res.data?.records || []
          total.value = res.data?.total || 0
        }
      } catch (e) {
        ElMessage.error('加载失败')
      } finally {
        loading.value = false
      }
    }

    const openAdd = () => {
      Object.assign(form, { id: null, type: '', name: '', phone: '', description: '', sortOrder: 0, status: 'active' })
      dialogVisible.value = true
    }

    const openEdit = (row) => {
      Object.assign(form, row)
      dialogVisible.value = true
    }

    const handleSave = async () => {
      saving.value = true
      try {
        const api = form.id ? request.put : request.post
        const url = '/admin/contacts'
        const res = await api(url, { ...form })
        if (res && (res.code === '200' || res.code === 200)) {
          ElMessage.success('保存成功')
          dialogVisible.value = false
          loadList()
        } else {
          ElMessage.error(res?.msg || '保存失败')
        }
      } catch (e) {
        ElMessage.error('保存失败')
      } finally {
        saving.value = false
      }
    }

    const handleDelete = async (row) => {
      try {
        await ElMessageBox.confirm(`确定删除“${row.name}”吗？`, '确认', { type: 'warning' })
        const res = await request.delete(`/admin/contacts/${row.id}`)
        if (res && (res.code === '200' || res.code === 200)) {
          ElMessage.success('删除成功')
          loadList()
        } else {
          ElMessage.error(res?.msg || '删除失败')
        }
      } catch {}
    }

    const handleSizeChange = (newSize) => {
      size.value = newSize
      current.value = 1 // 重置到第一页
      loadList()
    }
    
    const handleCurrentChange = (newCurrent) => {
      current.value = newCurrent
      loadList()
    }

    onMounted(loadList)

    return { loading, saving, list, total, current, size, keyword, type, status, dialogVisible, form, activeTab, loadList, openAdd, openEdit, handleSave, handleDelete, typeText, handleSizeChange, handleCurrentChange }
  }
}
</script>

<style scoped>
.admin-contacts { padding: 20px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 12px; }
.pager { margin-top: 12px; display: flex; justify-content: flex-end; }
</style>


